<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    请输入要查询的城市：<input type="text" id="city"/>
    <div id="container" style="min-width: 400px;height: 400px"></div>
</body>
</html>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
    $('#city').blur(function(){
        var city = $(this).val();
        $.ajax({
            url:"wea.php",
            data:{city:city},
            dataType:"json",
            type:"post",
            success:function(e){
                console.log(e);
                var week = "";
                var temp_low = "[";
                var temp_high = "[";
                $.each(e,function(i,v){
                    week+=v.week+",";
                    temp_low+= v.temp_low+",";
                    temp_high+=v.temp_high+",";
                });
                week = week.substring(0,27);
                week = week.split(",");
                console.log(week);
                temp_low+="]";
                temp_high+="]";
//                console.log(temp_low);
                var chart = Highcharts.chart('container',{
                    chart:{
                        type:'spline'
                    },
                    title:{
                        text:'一周的高低气温'
                    },
                    subtitle:{
                        text:'数据来源：1608c.com'
                    },
                    xAxis:{
                        categories:week
                    },
                    yAxis:{
                        title:{
                            text:'温度'
                        },
                        labels:{
                            formatter:function(){
                                return this.value + '°';
                            }
                        }
                    },
                    tooltip:{
                        crosshairs:true,
                        shared:true
                    },
                    plotOptions:{
                        spline:{
                            marker:{
                                radius:4,
                                lineColor:'#666666',
                                lineWidth:1
                            }
                        }
                    },
                    series:[{
                        name: '最高温',
                        marker: {
                            symbol: 'square'
                        },
                        data: eval(temp_high)
                    },{
                        name:'最低温',
                        marker: {
                            symbol: 'square'
                        },
                        data: eval(temp_low)
                    }]
                })
            }
        })
    })
</script>